<template>
    <div style="margin: 20px;">
        <el-container>           
        <el-header >        
          <span style="font-size:60px">患者费用查询</span>
          <el-link type="primary" href="/#/initMain" style="float:right"><b>返回首页</b></el-link>
        </el-header>
        <el-main style="text-align:left">               
            <span ><b>消费信息查询</b></span><br/>
            <div>
            <el-form  :model="costQueryForm" :rules="rules" ref="costQueryForm" label-width="60px" class="demo-costQueryForm">  
                <el-row gutter="20">
                  <el-col span="8">            
                    <el-form-item label="病历号" prop="patientId" >
                    <el-input v-model="costQueryForm.patientId"  placeholder="病历号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col span="8">
                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-model="costQueryForm.dates"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>                 
                <el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
              </el-row>
            </el-form>
            </div>
                
                <span ><b>患者信息确认</b></span>
                <table> 
                    <tr>
                        <td>姓名</td>        
                
                        <td><el-input v-model="name"  placeholder="姓名"></el-input></td><td></td>
                        <td>身份证号</td>
                        <td><el-input v-model="personId"  placeholder="身份证号"></el-input></td><td></td>
                        <td>家庭住址</td>
                        <td><el-input v-model="address"  placeholder="家庭住址"></el-input></td>
                    </tr>
                    
                </table>
                
                
                
                <hr/>
                <span ><b>消费信息</b></span>
                
                  <el-table
                    :data="tableData"
                    max-height="300"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort = "{prop: 'datetime', order: 'descending'}"
                    >
                    <el-table-column
                      prop="project"
                      label="项目名"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="单价"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="number"
                      label="数量"
                      width="120">
                    </el-table-column>
                   
                    <el-table-column
                      prop="singleCost"
                      label="金额"
                      width="200">
                      <!--<template slot-scope="scope">{{ scope.row.datetime }}</template>-->
                    </el-table-column>
                    <el-table-column
                      prop="datetime"
                      label="日期时间"
                      width="150">
                    </el-table-column>
                    
                  </el-table>
              </el-main>
            </el-container>
   </div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    
  }
</style>

<script>
  export default {
    
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
        });
      }

    },
    data() {
      return {
        name:'',
        personId:'',
        address:'',



        costQueryForm:{
            patientId:'' ,
            dates:[]//[ "2020-03-10T16:00:00.000Z", "2020-04-13T16:00:00.000Z" ]      
        },
        rules: {
          patientId: [
            { required: true, message: '请输入病历号', trigger: 'blur' },
            { min: 5, max: 9, message: '长度在 5 到 9 个字符', trigger: 'blur' }
          ]
        },
       tableData: [{
          project:'CT',
          price: '200',
          number:'1',
          singleCost:'200' ,
          datetime: '2020-08-02 08:18:30',
          
        }, {
         project:'麻醉剂',
          price: '50',
          number:'2',
          singleCost:'100' ,
          datetime: '2020-10-2 12:18:30',
        }, {
          project:'喉镜',
          price: '200',
          number:'1',
          singleCost:'200' ,
          datetime: '2020-10-2 00:18:30',
        }
        ]
      }
    }
  }
</script>